<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<template>
      <div class="app-container">
<!--        <el-page-header @back="$router.push({path: '/harvest/freightorder'})" content="货运单详情">-->
<!--        </el-page-header>-->
        <div class="rj-wrap">
          <div class="cont-left" id="viewSell">
            <div class="cont-box" style="margin-top: 5px;">
              <p class="cont-tit">基础信息</p>
              <div>
                <div class="rj-cell"><label>货运单编号：</label><span>{{forder.code}}</span></div>
                <div class="rj-cell"><label>采收合同：</label><span>{{contract.name}}</span></div>
                <div class="rj-cell"><label>采收主体：</label><span>{{forder.orgName}}</span></div>
                <div class="rj-cell"><label>供应商：</label><span>{{forder.supplierName}}</span></div>
                <div class="rj-cell"><label>地块：</label><span>{{forder.arealand}}</span></div>
                <div class="rj-cell"><label>承运人：</label><span>{{forder.carcode}} {{forder.drivername}} {{forder.driverphone}}</span></div>
                <div class="rj-cell"><label>货品：</label><span>{{forder.variety + ' ' + forder.specification}}</span></div>
<!--                <div class="rj-cell" v-if="contract.regionName"><label>区域：</label><span style="color: red;">{{contract.regionName}}</span></div>-->
<!--                <div class="rj-cell" v-if="contract.seriesName"><label>系列：</label><span style="color: red;">{{contract.seriesName}}</span></div>-->
                <div class="rj-cell"><label>库房：</label><span>{{forder.storeroom}}</span></div>
                <div class="rj-cell"><label>付款方式：</label><span>{{getPaytype(forder.setlwgtype)}}</span></div>
                <div class="rj-cell"><label>状态：</label><span>{{forder.statusName}}</span></div>
                <div class="rj-cell"><label>付款状态：</label><span>{{forder.paystatusName}}</span></div>
                <div class="rj-cell"><label>负责人：</label><span>{{forder.operator}}</span></div>
                <div class="rj-cell"><label>装车时间：</label><span>{{forder.createtime}}</span></div>
                <div class="rj-cell" v-if="forder.address"><label><img src="../../../assets/image/icon-location.png" width="15px" height="15px" /></label><span>{{forder.address}}</span></div>
                <div class="rj-cell" v-if="forder.distance"><label><img src="../../../assets/image/icon-distance.png" width="15px" height="15px" /></label><span>{{forder.distance}} Km</span></div>
                <div class="rj-cell"><label>卸货时间：</label><span>{{forder.unloadtime}}</span></div>
                <div class="rj-cell"><label>入库时间：</label><span>{{forder.whinTime}}</span></div>
                <div class="rj-cell"><label>备注：</label><span>{{forder.remark}}</span></div>
              </div>
<!--              <p class="cont-tit" @click="toQainfo()" v-if="qaform != ''">质检单</p>-->
              <p class="cont-tit">质检信息</p>
              <div>
                <div class="rj-cell"><label>质检标准：</label><span>{{forder.qaname}}</span></div>
                <div class="rj-cell"><label>扣杂方式：</label><span>{{contract.deducttypeName}}</span></div>
                <div class="rj-cell"><label>扣杂标准：</label><span>{{forder.isdiscountName}}</span></div>
                <template v-if="contract.deducttype == 1">
                  <div class="rj-cell"><label>合同扣杂率：</label><span>{{contract.discountrate + '%'}}</span></div>
                  <div class="rj-cell" v-if="qaform"><label>质检扣杂率：</label><span>{{qaform.deductrate + '%'}}</span></div>
                  <div class="rj-cell" v-if="forder.ratend"><label>最终扣杂率：</label><span>{{forder.ratend + '%'}}</span></div>
                </template>
                <template v-if="contract.deducttype == 2">
                  <div class="rj-cell" v-if="qaform.soilchkrate"><label>土杂率：</label><span>{{qaform.soilchkrate + '%'}}</span></div>
                  <div class="rj-cell" v-if="forder.isdiscount != 6 && qaform.unqualifiedchkrate"><label>不合格率：</label><span>{{qaform.unqualifiedchkrate + '%'}}</span></div>
                  <div class="rj-cell" v-if="forder.isdiscount == 6 && forder.acceptStatus"><label>质检结果：</label><span>{{forder.acceptStatus == 1 ? '合格' : '不合格'}}</span></div>
<!--                  <span style="color: #0BB20C;font-size: 12px;" @click="viewQaform">详情 >></span>-->
                </template>
                <div class="rj-cell" v-if="qaform"><label>质检人员：</label><span>{{qaform.operatorname}}</span></div>
                <div class="rj-cell" v-if="qaform"><label>质检时间：</label><span>{{qaform.createdate}}</span></div>
              </div>
              <p class="cont-tit" v-if="forder.actualSettl">结算信息</p>
              <div v-if="forder.actualSettl">
                <template v-if="contract.deducttype == 1">
                  <div class="rj-cell"><label>合同单价：</label><span>{{forder.price + ' 元/吨'}}</span></div>
                  <div class="rj-cell" v-if="forder.actualSettl"><label>结算单价：</label><span>{{forder.actualSettl + ' 元/吨'}}</span><span style="color: #999" v-if="!forder.confirmedPrice"> [= 合同单价 * (1 - 最终扣杂率)]</span></div>
<!--                  <p style="font-size: 12px;text-align: left;margin-right: 10px">= 合同单价 * (1 - 最终扣杂率)</p>-->
                </template>
                <template v-if="contract.deducttype == 2">
                  <div class="rj-cell"><label>合同单价：</label><span>合格薯：{{passPrice ? passPrice : forder.price + ' 元/吨'}}</span><span style="padding-left: 10px;">淀粉薯：{{unpassPrice + ' 元/吨'}}</span></div>
                  <div class="rj-cell" v-if="forder.actualSettl"><label>结算单价：</label><span>{{forder.actualSettl + ' 元/吨'}}</span></div>
                  <p v-if="forder.isdiscount != 6" style="padding-left:10px;font-size: 12px;text-align: left;margin-right: 10px">结算单价 = 合格薯单价 * (1 - 土杂率 - 不合格率) + 淀粉薯单价 * 不合格率</p>
                  <p v-if="forder.isdiscount == 6" style="padding-left:10px;font-size: 12px;text-align: left;margin-right: 10px">结算单价 = 合同单价 + 奖励金额 - 扣罚金额</p>
                </template>
                <div class="rj-cell" v-if="forder.weight"><label>拉货重量：</label><span>{{forder.weight}} 吨</span></div>
                <div class="rj-cell"><label>过磅重量：</label><span>{{forder.hweight}} 吨</span></div>
                <div class="rj-cell"><label>入库重量：</label><span>{{forder.netWeight}} 吨</span></div>
                <div class="rj-cell"><label>每件毛重：</label><span>{{forder.wghtperpkg}} Kg</span></div>
                <div class="rj-cell"><label>包装物重量：</label><span>{{forder.pkgwgh}} Kg</span></div>
<!--                <div class="rj-cell"><label>结算重量：</label><span>{{forder.setlwgtype == 1 ? forder.weight : forder.hweight}} 吨</span></div>-->
                <div class="rj-cell"><label>结算重量：</label><span>{{forder.weight}} 吨</span></div>
                <div class="rj-cell" v-if="forder.settlement"><label>结算金额：</label><span>{{forder.settlement}} 元</span></div>
              </div>
            </div>

          </div>
          <div class="cont-right">
            <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="guid" ></FlowNode>
          </div>
        </div>
      </div>
</template>

<script>
  import FlowNode from '@/components/FlowNode/index'
  import { getFreightorder } from "@/api/harvest/freightorder";
  import addressJpg from '@/assets/image/icon-location.png'
    let qs = require('qs');
    export default {
        name: 'forderinfo',
        data () {
            return {
              flowid: 40,
              guid : '',
              forder: '',
              qaform: '',
              contract: '',
              constants: [],
              price: '',
              awardamount: '',
              deductamount: '',
              whinform: '',
              isReady: false
            }
        },
        components: {
          FlowNode,
          addressJpg
        },
      computed: {
        passPrice: function () {
          if (this.constants.length == 0) return;
          return (this.constants.filter(item => {
            return item.type == 1;
          })[0] || '') .price;
        },
        unpassPrice: function () {
          if (this.constants.length == 0) return;
          return (this.constants.filter(item => {
            return item.type == 2;
          })[0] || '').price;
        }
      },
      created() {
            let that = this;
            this.guid = this.$route.query.id;
            this.getOrder(this.guid);
        },
        methods: {
          getPaytype: function(type) {
            let name = '';
            if (type == 1) {
              name = '地头付';
            } else if (type == 2) {
              name = '验收付';
            }
            return name;
          },
          toQainfo: function() {
            console.log('本地跳转：-',location.href)
            const path = encodeURIComponent(location.href);
            console.log('解码后的location：',path)
            location.href = `/harvest/Qarecord!detail.action?s=${this.forder.guid}&door=fodetail&fromurl=${path}`;
          },
          viewQaform: function() {
            this.$router.push({name: 'ViewQaform', query: {id: this.forder.guid, fromurl: encodeURIComponent(location.href)}});
          },
          handleClickOutside() {
            this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
          },
            packUnit: function(unit, currency) {
                return unit != undefined && unit != '' ? currency == 2 ? '美元/' : '元/' + unit : '';
            },
            getOrder: function (id) {
                let that = this;
              getFreightorder(id).then(response => {
                    console.log('response：', response)
                    if (response.code == 200) {
                      this.forder = response.data.order;
                      this.qaform = response.data.qaform || '';
                      this.contract = response.data.contract || {};
                      this.whinform = response.data.whinform || {};
                      this.constants = response.data.constants || [];
                      this.price = response.data.price || '';
                      this.awardamount = response.data.awardamount || '';
                      this.deductamount = response.data.deductamount || '';
                      this.isReady = true;
                    } else {
                        this.msgError('系统错误');
                    }
                });
            }
        }
    }
</script>
